<template>
  <div class="outmain ba_f">
    <div class="shuju_title mar_b20">
      <div class="shuju_title_text">
        <span>门店分组</span>
      </div>
    </div>
    <el-button type="primary" size="medium" @click="handleEdit">新增分组</el-button>
    <div class="tabledata mar_t20">
      <el-table v-loading="listLoading" :element-loading-text="elementLoadingText" :data="list" stripe style="width: 100%" @selection-change="setSelectRows">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="sort" label="排序"></el-table-column>
        <el-table-column prop="name" label="分组名称"></el-table-column>
        <el-table-column prop="display" label="状态">
          <template slot-scope="scope">
            <div class>
              <el-switch v-model="scope.row.display" active-value="1" inactive-value="2" @change="changeSwitch(scope.row)"></el-switch>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="总店抽佣">
          <template slot-scope="scope">
            <div v-if="scope.row.data.type=='1'">
              <div>总店抽佣：{{scope.row.data.goodsPlatformProportion}}%</div>
              <div>配送费：{{scope.row.data.deliverPlatformProportion}}%</div>
              <div>包装费：{{scope.row.data.boxPlatformProportion}}%</div>
            </div>
            <div v-else>
              <div>总店抽佣：{{scope.row.data.goodsFixedMoney}}元</div>
              <div>配送费：{{scope.row.data.deliverFixedMoney}}元</div>
              <div>包装费：{{scope.row.data.boxFixedMoney}}元</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div class="flex">
              <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next" :total="page.total" :page-size="page.pagesize" :current-page.sync="page.currentPage" @current-change="handleCurrentChange"></el-pagination>
      <edit ref="edit" @fetchData="fetchData"></edit>
    </div>
  </div>
</template>
<script>
import Edit from '../shop/components/shopclassifyedit';
import { storeCategoryList, modifyStoreCategory } from '@/api/shop';
export default {
  components: { Edit },
  created() {
    this.fetchData();
  },
  data() {
    return {
      list: [],
      listLoading: true,
      selectRows: '',
      elementLoadingText: '正在加载...',
      page: {
        total: 0,
        size: 10,
        currentPage: 1
      }
    };
  },
  methods: {
    async fetchData() {
      this.listLoading = true;
      var params = {
        page: this.page.currentPage,
        item: 1
      };
      const { data, count } = await storeCategoryList(params);
      this.list = data;
      this.page.total = count;
      setTimeout(() => {
        this.listLoading = false;
      }, 100);
    },
    handleEdit(row) {
      if (row.id) {
        this.$refs['edit'].showEdit(row);
      } else {
        this.$refs['edit'].showEdit();
      }
    },
    setSelectRows(val) {
      this.selectRows = val;
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.fetchData();
    },
    async changeSwitch(row) {
      const { msg } = await modifyStoreCategory({ id: row.id, type: 1, display: row.display });
      this.$baseMessage(msg, 'success');
      this.fetchData();
    },
    handleDelete(row) {
      if (row.id) {
        this.$baseConfirm('你确定要删除当前项吗', null, async () => {
          const { msg } = await modifyStoreCategory({ id: row.id, type: 2 });
          this.$baseMessage(msg, 'success');
          this.fetchData();
        });
      } else {
        if (this.selectRows.length > 0) {
          const id = this.selectRows.map((item) => item.id);
          this.$baseConfirm('你确定要删除选中项吗', null, async () => {
            const { msg } = await modifyStoreCategory({ id, type: 2 });
            this.$baseMessage(msg, 'success');
            this.fetchData();
          });
        } else {
          this.$baseMessage('未选中任何行', 'error');
          return false;
        }
      }
    }
  }
};
</script>
